<template>
  <div class="head--wrap">
    <div class="head-left">
      <img src="@/assets/img/logo.png" alt="logo" class="robo--logo" />
      <h1 class="hospital--name">远程自动超声辅助诊断系统-阅片评价系统</h1>
    </div>
    <!-- <div class="head-mid">
    </div> -->
    <div class="head-right">
      <span title="检查记录">
        <svg
          t="1641792665501"
          class="head-icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3825"
          width="35"
          height="35"
          @click="goRecord"
        >
          <path
            d="M783.53 240.47C641.08 98.02 413.8 91.41 263.09 220.03V167.1c0-17.67-14.33-32-32-32s-32 14.33-32 32v128c0 17.67 14.33 32 32 32h128c17.67 0 32-14.33 32-32s-14.33-32-32-32h-48.15c125.55-101.54 310.66-94.06 427.34 22.62 124.75 124.77 124.75 327.8 0 452.56-124.78 124.75-327.78 124.75-452.56 0C225.28 677.84 192 597.48 192 512c0-17.67-14.33-32-32-32s-32 14.33-32 32c0 102.58 39.94 199.02 112.47 271.53 74.86 74.86 173.19 112.3 271.53 112.3 98.33 0 196.67-37.44 271.53-112.3 149.7-149.72 149.7-393.34 0-543.06z"
            p-id="3826"
            fill="#dbdbdb"
          ></path>
          <path
            d="M512 288c-17.67 0-32 14.33-32 32v185.38c0 12.81 5 24.88 14.06 33.94l123.31 123.31c6.25 6.25 14.44 9.38 22.62 9.38s16.38-3.12 22.62-9.38c12.5-12.5 12.5-32.75 0-45.25L544 498.75V320c0-17.67-14.33-32-32-32z"
            p-id="3827"
            fill="#dbdbdb"
          ></path>
        </svg>
      </span>
      <a-dropdown overlayClassName="menu--drop">
        <span class="user--name--box">
          <svg
            t="1641605707398"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2431"
            width="36"
            height="36"
          >
            <path
              d="M512 447.223c-88.224 0-160-71.776-160-160s71.776-160 160-160c88.225 0 160 71.776 160 160s-71.775 160-160 160z m0-256c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zM454.901 870.594c-96.594 0-184.933-3.802-231.263-49.955C203.308 800.386 193 774.164 193 742.701c0-31.629 10.247-62.812 30.457-92.686 17.978-26.573 42.908-50.741 74.098-71.833C359.256 536.46 437.418 512.53 512 512.53c74.55 0 152.55 23.943 214.002 65.691 31.05 21.094 55.861 45.273 73.746 71.867C819.822 679.937 830 711.096 830 742.701c0 31.552-10.317 57.827-30.664 78.097-50.714 50.521-151.822 50.128-258.88 49.723a7395.45 7395.45 0 0 0-56.914-0.001c-9.605 0.037-19.163 0.074-28.641 0.074zM512 806.447c9.567 0 19.149 0.037 28.701 0.073 49.52 0.191 96.284 0.37 135.808-4.396 38.418-4.633 64.546-13.604 77.659-26.668 5.079-5.06 11.832-13.96 11.832-32.755 0-38.089-27.688-78.744-75.963-111.54C638.933 596.442 574.04 576.53 512 576.53c-126.309 0-255 83.862-255 166.171 0 18.675 6.738 27.547 11.807 32.596 32.045 31.922 128.975 31.55 214.491 31.224 9.556-0.037 19.139-0.074 28.702-0.074z"
              fill="#dbdbdb"
              p-id="2432"
            ></path>
          </svg>
          <p class="user--name">
            {{ userInfo.name }}
          </p>
        </span>
        <a-menu slot="overlay">
          <a-menu-item
            v-show="
              userInfo.level === 1 ||
              userInfo.level === 5 ||
              userInfo.level === 2
            "
          >
            <span class="menu--item" @click="setUser"
              ><a-icon type="user" />账号管理</span
            >
          </a-menu-item>
          <a-menu-item>
            <span class="menu--item" @click="handleUser">
              <a-icon type="user-add" />用户信息</span
            >
          </a-menu-item>
          <a-menu-item
            v-show="
              userInfo.level === 1 ||
              userInfo.level === 5 ||
              userInfo.level === 2
            "
          >
            <span class="menu--item" @click="setGeneral">
              <a-icon type="setting" />通用设置</span
            >
          </a-menu-item>

          <a-menu-item>
            <span class="menu--item" @click="handlePassword">
              <a-icon type="lock" />修改密码</span
            >
          </a-menu-item>
          <a-menu-item
            v-show="
              userInfo.level === 1 ||
              userInfo.level === 5 ||
              userInfo.level === 2
            "
          >
            <span class="menu--item" @click="handleLog">
              <a-icon type="snippets" />查看日志</span
            >
          </a-menu-item>
          <a-menu-item>
            <span class="menu--item" @click="about"
              ><a-icon type="info-circle" />关于
            </span>
          </a-menu-item>
          <a-menu-item>
            <span class="menu--item" @click="loginOut"
              ><a-icon type="logout" />退出</span
            >
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </div>
  </div>
</template>

<script>
import { loginOut } from "@/api/login";
import { mapState } from "vuex";
// import HeadSvg from "@/components/HeadSvg";
export default {
  name: "Head",
  props: {
    who: {
      type: String,
    },
  },
  components: {
    // HeadSvg,
  },
  data() {
    return {
      user: "admin",
    };
  },

  computed: {
    ...mapState(["userInfo", "curPatRecord", "SERVERBASE_URL"]),
  },

  methods: {
    //去检查记录页
    goRecord() {
      if (this.$route.name == "main") {
        return;
      }
      console.log(
        "%c [ 去检查记录页 ]-228",
        "font-size:13px; background:pink; color:#bf2c9f;",
        this.$route
      );
      this.$router.push({ name: "main" });
    },

    //返回首页
    goBack() {
      console.log(
        "%c [ 返回首页 ]-238",
        "font-size:13px; background:pink; color:#bf2c9f;",
        "返回首页"
      );
    },
    //用户信息
    handleUser() {
      this.$emit("on-handleUser");
    },
    //通用设置
    setGeneral() {
      this.$emit("on-setGeneral");
    },
    //去设置用户
    setUser() {
      console.log(
        "%c [ 去设置用户 ]-300",
        "font-size:13px; background:pink; color:#bf2c9f;",
        "去设置用户"
      );
      this.$router.push({ name: "userList" });
      // if (this.who === "local") {
      //   this.$EventBus.$emit("go2User_cur");
      // } else if (this.who === "remote") {
      //   this.$EventBus.$emit("go2User_pat");
      // }
    },
    //密码修改
    handlePassword() {
      this.$emit("on-handlePassword");
    },
    //关于
    about() {
      this.$emit("on-about");
    },
    //退出登录
    loginOut() {
      const vm = this;
      const name = this.userInfo.name;
      loginOut(this.SERVERBASE_URL, name)
        .then((res) => {
          if (res.code == 200) {
            vm.$router.push({ name: "Login" });
            vm.$store.commit("INITSTATE");
            window.sessionStorage.clear();
            window.localStorage.clear();
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleLog() {
      this.$emit("on-handleLog");
    },
  },
};
</script>

<style scoped>
.head--wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  background-color: rgb(18, 18, 18);
  border-color: rgb(51, 51, 51);
  box-shadow: 0px 0px 50px 1px rgb(85 85 85 / 100%) inset;
  padding: 0 20px;
}
.head-left,
.head-mid,
.head-right {
  display: flex;
  align-items: center;
}
.head-right span {
  display: flex;
  align-items: center;
}

.head-icon {
  cursor: pointer;
  transition: all 0.1s linear;
  margin-right: 30px;
}
.icon:hover {
  color: aqua;
  transform: calc(1.1);
}

.robo--logo {
  width: 186px;
  height: 40px;
  cursor: pointer;
  margin-right: 25px;
}
.menu--item {
  display: inline-block;
  padding: 10px 17px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.847);
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  /* border: 1px solid blueviolet; */
}
.menu--item--w {
  margin-left: 5px;
}
.hospital--name {
  color: rgba(255, 255, 255, 0.847);
  font-size: 28px;
}
.user--name--box {
  display: flex;
  align-items: center;
}
.user--name {
  font-size: 16px !important;
  max-width: 80px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0;
  padding: 0;
}
.menu--drop ul {
  background: rgb(37, 37, 37);
}
.menu--drop .ant-dropdown-menu-item {
  padding: 0 !important;
}
.menu--drop .ant-dropdown-menu-item:hover span {
  color: rgb(37, 37, 37);
}
.menu--drop .ant-dropdown-menu-item .anticon {
  color: #fff;
}
.menu--drop .ant-dropdown-menu-item:hover .anticon {
  color: rgb(37, 37, 37);
}
.model--wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  /* width: 150px; */
  height: 48px;
  color: #fff;
  font-size: 22px;
  border-radius: 8px;
  background-color: rgb(56, 55, 55);
  margin-right: 30px;
  font-weight: 500;
}
</style>
